<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb separator="/" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>业务管理</el-breadcrumb-item>
      <el-breadcrumb-item>物资类别</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片-->
    <el-card>
      <el-row>
        <el-col :span="8">
          <el-button type="primary" class="el-icon-plus" @click="add">添加</el-button>
        </el-col>
      </el-row>

      <!-- 表格部分 -->
      <zk-table
          v-loading="loading"
          style="margin-top:10px;"
          ref="table"
          show-index
          :expand-type="false"
          :selection-type="false"
          sum-text="sum"
          index-text="ID"
          :data="categorys"
          :columns="columns"
      >
        <!-- 层级 -->
        <template slot="lev" slot-scope="scope">
          <el-tag v-if="scope.row.lev===1">一级分类</el-tag>
          <el-tag type="success" v-else-if="scope.row.lev===2">二级分类</el-tag>
          <el-tag type="danger" v-else>三级分类</el-tag>
        </template>
        <!-- 操作 -->
        <template slot="caozuo" slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit"
                     @click="editProductCategoryTree(scope.row)"></el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete"
                     @click="deleteProductCategory(scope.row)"></el-button>
        </template>
      </zk-table>
      <div style="margin-top: 10px">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2,5,8,10]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>

      <!--编辑-->
      <el-dialog
          title="编辑分类"
          :visible.sync="editDialogVisible"
          width="30%"
          @close="onClose"
      >
        <div>
          <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
            <el-form-item label="分类名称" prop="name">
              <el-input v-model="formData.name" placeholder="请输入分类名称" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注"
                        :autosize="{minRows: 2, maxRows: 4}" :style="{width: '100%'}"></el-input>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
              <el-input-number v-model="formData.sort" placeholder="排序" :step='1'></el-input-number>
            </el-form-item>

          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="onClose">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
            </span>
      </el-dialog>
      <!--添加-->
      <el-dialog
          title="提示"
          :visible.sync="addDialogVisible"
          width="40%"
          @open="openAdd"
          @close="addClose"
      >
        <el-form ref="productCategoryForm" :model="ProductCategoryVO" :rules="ProductCategoryVOrRules" size="medium"
                 label-width="100px">
          <el-form-item label="分类名称" prop="name">
            <el-input v-model="ProductCategoryVO.name" placeholder="请输入单行文本分类名称" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-form-item label="父分类" prop="pid">
            <el-cascader v-model="pidKey"
                         v-loading="addLoading"
                         @change="changePid"
                         :options="pidOptions"
                         :props="pidProps"
                         show-all-levels
                         :style="{width: '100%'}" placeholder="请选择父分类" clearable></el-cascader>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="ProductCategoryVO.remark" type="textarea" placeholder="请输入备注"
                      :autosize="{minRows: 2, maxRows: 4}" :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input-number v-model="ProductCategoryVO.sort" placeholder="排序" :step='1'></el-input-number>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
         <el-button @click="addClose">取 消</el-button>
       <el-button type="primary" @click="addSubmit">确 定</el-button>
       </span>
      </el-dialog>
    </el-card>

  </div>
</template>

<script>
import {edit, getProductCategoryTree, deleteById, getProductCategory2Tree,add} from "@/network/business/productCategory";

export default {
  name: "Category",
  data() {
    return {
      pidKey: [],
      addDialogVisible: false,//添加窗口
      editDialogVisible: false, //编辑
      pageNum: 1, //当前页
      pageSize: 5, //每页显示条数
      total: 0,
      addLoading:true,//控制添加窗口
      loading: true,//控制编辑窗口
      /*内容*/
      categorys: [],
      /*表格标题*/
      columns: [
        {
          label: '分类名称',
          prop: 'name'
        },
        {
          label: '排序',
          prop: 'sort'
        },
        {
          label: '创建时间',
          prop: 'createTime'
        },
        {
          label: '修改时间',
          prop: 'modifiedTime'
        },
        {
          label: '备注',
          prop: 'remark'
        },
        {
          label: '层次',
          prop: "lev",
          type: "template",
          template: "lev"
        },
        {
          label: '操作',
          type: "template",
          template: "caozuo"
        },
      ],
      formData: {
        id: undefined,
        name: undefined,
        remark: undefined,
        sort: undefined,
      },
      rules: {
        name: [{
          required: true,
          message: '请输入分类名称',
          trigger: 'blur'
        }],
        remark: [{
          required: true,
          message: '请输入备注',
          trigger: 'blur'
        }],
        sort: [{
          required: true,
          message: '排序',
          trigger: 'blur'
        }],
      },
      ProductCategoryVO: {
        name: undefined,
        pid: undefined,
        remark: undefined,
        sort: undefined,
      },
      ProductCategoryVOrRules: {
        name: [{
          required: true,
          message: '请输入单行文本分类名称',
          trigger: 'blur'
        }],
        pid: [],
        remark: [{
          required: true,
          message: '请输入备注',
          trigger: 'blur'
        }],
        sort: [{
          required: true,
          message: '排序',
          trigger: 'blur'
        }],
      },
      pidOptions: [],
      pidProps: {
        "multiple": false,
        "label": "name",
        "value": "id",
        "children": "children",
        "checkStrictly": true
      },
    }


  },
  created() {
    //获取数据
    this.getProductCategoryTree()
  },
  methods: {
    //当选中节点变化时触发
    changePid() {
      const len = this.pidKey.length
      if (len > 0) {
        this.ProductCategoryVO.pid = this.pidKey[len - 1]
      } else {
        this.ProductCategoryVO.pid = 0
      }
    },
    //确定添加
    addSubmit() {
      this.$refs['productCategoryForm'].validate(valid=>{
        if (!valid) return
      add(this.ProductCategoryVO).then((res) => {
      if (res.success){
        this.$message({
          message: '恭喜你，添加成功',
          type: 'success'
        });
        this.getProductCategoryTree()
      }else {
        this.$message({
          message: res.message,
          type: 'warning'
        });
      }
      })
      })
      //关闭
    this.addClose();
    },
    //打开添加窗口
    openAdd() {
      getProductCategory2Tree().then((res) => {
        this.pidOptions=res.data.tree2List
        this.addLoading=false
      })
    },
    add() {
      this.addDialogVisible = true
    },
    /*编辑分类*/
    editProductCategoryTree(data) {
      this.formData.id = data.id
      this.formData.name = data.name
      this.formData.remark = data.remark
      this.formData.sort = data.sort
      this.editDialogVisible = true
    },
    /*删除分类*/
    deleteProductCategory(data) {
      console.log(data)
      this.$confirm('此操作将永久删除 ' + data.name + ' 分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        deleteById(data.id).then((res) => {
          console.log(res)
          if (res.success) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          } else {
            this.$message.error(res.message)
          }
        })


      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    /*设置每页条数*/
    handleSizeChange(val) {
      this.pageSize = val
      //重新获取数据
      this.getProductCategoryTree()
    },
    /*跳转页*/
    handleCurrentChange(val) {
      this.pageNum = val
      //重新获取数据
      this.getProductCategoryTree()
    },
    //获取分层树
    getProductCategoryTree() {
      getProductCategoryTree(this.pageNum, this.pageSize).then((res) => {
        this.categorys = res.data.list.rows
        this.total = res.data.list.total
        this.loading = false;
      })
    },addClose(){
      this.addDialogVisible = false
      this.ProductCategoryVO={}
      this.pidKey=[]
    },
    //关闭
    onClose() {
      //关闭弹窗
      this.editDialogVisible = false
    },
    //提交
    submit() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        edit(this.formData).then((res) => {
          if (res.success) {
            this.$message({
              message: '恭喜你，修改成功',
              type: 'success'
            });
            this.getProductCategoryTree()
          } else {
            this.$message({
              message: res.message,
              type: 'warning'
            });
          }
        })

      })
      //关闭
      this.onClose()
    }
  }
}
</script>

<style scoped>

</style>